<template>
  <div class="member-form-container">
    <el-card class="member-form-card">
      <el-form :model="memberForm" label-width="120px" ref="memberFormRef">
        <el-form-item label="姓名">
          <el-input v-model="memberForm.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="memberForm.email" maxlength="11" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="memberForm.password" type="password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="会员等级">
          <el-select v-model="memberForm.vipId" placeholder="请选择会员等级">
            <el-option
              v-for="item in memberForm.viplist"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="orders-card">
      <el-table
        v-loading="memberForm.loadings"
        :data="memberForm.tableData"
        style="width: 100%; height: 200px"
        row-class-name="order-row"
      >
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="phasr" label="手机号" />
        <el-table-column prop="vipName" label="会员等级" />
        <el-table-column prop="purchasetime" label="购买时间" />
        <el-table-column label="操作">
          <template #header>
            <el-input v-model="datas.key" size="small" placeholder="请输入手机号搜索" />
          </template>
          <template #default="scope">
            <el-button type="text" @click="viewOrderDetails(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          background
          :page-size="datas.limit"
          layout="prev, pager, next"
          :total="datas.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <el-dialog
      v-model="memberForm.dialogTableVisible"
      :destroy-on-close="true"
      title="会员订单"
      width="800"
    >
      <vipjzxx
        :data="memberForm.nextshiftlist"
        @myclose="
          () => {
            resetForm();
            memberForm.dialogTableVisible = false;
          }
        "
      />
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, onMounted, watch } from "vue";
import vipjzxx from "@/components/vipjzxx.vue";
import { getVip, Getemploy_Vip } from "@/api/vip";
import { AddordersAsync } from "@/api/vip";

const memberForm = reactive({
  ooid: "",
  name: "",
  email: "",
  password: "",
  vipId: "",
  tableData: [],
  viplist: [],
  nextshiftlist: [],
  loadings: false,
  dialogTableVisible: false,
});

const datas = reactive({
  page: 1,
  limit: 6,
  total: 0,
  key: "",
});

//新增vip
const submitForm = async () => {
  const res = await AddordersAsync({
    ...memberForm,
  });
  if (res.code === 0) {
    memberForm.ooid = res.data;
    memberForm.dialogTableVisible = true;
    memberForm.nextshiftlist = memberForm;
  }
};

//重置
const resetForm = () => {
  memberForm.name = "";
  memberForm.email = "";
  memberForm.level = "";
  memberForm.password = "";
  memberForm.vipId = "";
};

//获取vip
const bind = async () => {
  memberForm.loadings = true;
  const res = await getVip();
  if (res.code === 0) {
    memberForm.viplist = res.data.data;
  }
  const ress = await Getemploy_Vip({
    ...datas,
  });
  if (ress.code === 0) {
    memberForm.tableData = ress.data.data;
    datas.total = ress.data.total;
  }
  memberForm.loadings = false;
};

onMounted(() => {
  bind();
});

// 监听数据变化
watch([datas], (newVal, oldVal) => {
  bind();
});
</script>

<style scoped>
.member-form-container {
  padding: 20px;
  background-color: #f0f2f5;
  height: 660px;
}

.member-form-card {
  padding: 20px 20px 0 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.el-form-item {
  margin-bottom: 20px;
}

.orders-card {
  margin: 20px 0 0 0;
  height: 280px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.pagination-container {
  margin-top: 8px;
}
</style>
